<script setup>
import { ref, watch } from 'vue';

const emit = defineEmits(['update:value']);
const props = defineProps(['value']);
const list = ref([{ value: 'DESC', label: '降序' }, { value: 'ASC', label: '升序' }]);

const mode = ref(R.find( R.propEq(props.value, 'value'), list.value ));
watch(mode, newValue => emit('update:value', newValue.value));

function select({ key }) {
  mode.value = R.find( R.propEq(key, 'value'), list.value );
}
</script>

<template>
  <a-dropdown>
    <span>
      <template v-if="'DESC' == mode.value">
        <svg style="margin-right: 4px;" t="1687933785870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4907" width="18" height="18"><path d="M388.937 93c16.505 0 29.885 13.389 29.885 29.905v815.13l-0.01 0.792c-0.629 26.014-32.162 38.951-50.859 20.502L72.902 668.183l-0.551-0.558c-11.203-11.638-11.15-30.16 0.255-41.733l0.557-0.551c11.63-11.21 30.14-11.158 41.705 0.255l244.183 240.953V122.905l0.009-0.706C359.435 106.01 372.667 93 388.937 93z m302.306 712.822c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.609c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h149.634z m87.356-195.534c16.505 0 29.884 13.389 29.884 29.905 0 16.28-13 29.522-29.179 29.897l-0.705 0.008h-236.99c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h236.99z m82.758-195.534c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.609c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h319.748z m82.758-195.435c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.61c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h402.506z" p-id="4908"></path></svg>
      </template>
      <template v-else>
        <svg style="margin-right: 4px;" t="1687933847747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5059" width="18" height="18"><path d="M418.812 122.173l0.01 0.792v815.13c0 16.516-13.38 29.905-29.885 29.905-16.27 0-29.502-13.01-29.877-29.2l-0.008-0.705-0.001-743.644-244.183 240.953c-11.565 11.413-30.075 11.466-41.705 0.255l-0.557-0.55c-11.405-11.574-11.458-30.096-0.255-41.734l0.55-0.558 295.052-291.146c18.697-18.45 50.23-5.512 50.859 20.502z m272.43 683.649c16.506 0 29.886 13.389 29.886 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.609c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h149.634zM778.6 610.288c16.505 0 29.884 13.389 29.884 29.905 0 16.28-13 29.522-29.179 29.897l-0.705 0.008h-236.99c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h236.99z m82.758-195.534c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.609c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h319.748z m82.758-195.435c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.61c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h402.506z" p-id="5060"></path></svg>
      </template>
      {{ mode.label }}
    </span>
    <template #overlay>
      <a-menu @click="select">
        <a-menu-item
          v-for="o in list"
          :key="o.value">
          <span :style="{ color: mode.value == o.value ? 'var(--main-color)' : 'var(--default-color)' }">
            {{ o.label }}
          </span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style>
.ant-dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
